<template>
  <div>
    <van-popup v-model="show" position="bottom" :style="{ height: '90%' }">
      <!-- 我的频道 -->
      <!-- 我的频道 - 标题 -->
      <van-cell title="我的频道">
        <template #default>
          <van-button v-if="isEdit===false" round plain size="mini" type="danger" @click="isEdit=true">编辑</van-button>
          <van-button v-if="isEdit===true" round plain size="mini" type="danger" @click="isEdit=false">完成</van-button>
        </template>
      </van-cell>
      <!-- 我的频道 - 列表 -->
      <van-grid>
        <van-grid-item @click="changeChannel(index)" class="myitem" v-for="(item, index) in channelsList" :key="index">
          <template #text>
            <span :class="{ active: index === active }">{{ item.name }}</span>
            <van-icon @click.stop="delChannel(index)" v-if="isEdit" class="cross" name="clear" />
          </template>
        </van-grid-item>
      </van-grid>
      <!-- 频道推荐 -->
      <!-- 频道推荐 - 标题 -->
      <van-cell title="频道推荐">
      </van-cell>
      <!-- 频道推荐 - 列表 -->
      <van-grid>
        <van-grid-item @click="addChannel(item)" :text="item.name" v-for="(item, index) in tuijianChannel" :key="index" />
      </van-grid>
    </van-popup>
  </div>
</template>

<script>
// 导入操作频道的方法
import { apiGetAllChannels, apiResetChannels } from '../../../api/channle'
// 导入操作 localstorage 的方法
import { localSet } from '../../../utils/mylocal'

export default {
  // 接收父组件传入的数据
  // channelsList: 我的频道数据
  // active: 当前选中的频道
  props: ['channelsList', 'active'],
  data () {
    return {
      // 控制面板的显示与隐藏
      show: false,
      // 是否处于编辑状态
      isEdit: false,
      // 保存所有的频道数据
      allChannelList: []
    }
  },
  computed: {
    // 定义一个推荐频道数据
    tuijianChannel: function () {
      // 从所有频道数组中删除掉我的频道数据
      // 1.0 得到我的频道数组中所有元素的 id
      var ids = this.channelsList.map(item => {
        return item.id
      })
      // 2.0 遍历所有的频道数据，从数组中删除我的频道数据.得到的结果就是推荐频道
      var newArr = this.allChannelList.filter(item => {
        return !ids.includes(item.id)
      })
      return newArr
    }
  },
  methods: {
    // 改变显示的频道
    changeChannel (index) {
      // 将数据传回到父组件，在父组件进行修改
      // this.$emit('changeactive', index)
      // 将修改的事件名作出一些调整
      this.$emit('update:active', index)
    },
    // 删除频道
    async delChannel (index) {
      // 将 index 对应下标的元素从我的频道中删除
      this.channelsList.splice(index, 1)
      // 保存删除之后的状态
      var token = this.$store.state.userInfo.token
      if (!token) {
        // 1.0 未登录：保存到 localstorage 中
        localSet('channels', this.channelsList)
      } else {
        // 2.0 已登录：保存到 服务器 中
        // 生成 channels 数据
        var channels = this.channelsList.slice(1).map((item, index) => {
          return {
            id: item.id,
            seq: index + 2
          }
        })
        try {
          await apiResetChannels(channels)
        } catch {
          this.$toast('修改频道失败')
        }
      }
    },
    // 添加频道
    async addChannel (item) {
      // 在添加之前添加额外的属性
      this.$set(item, 'articleList', [])
      this.$set(item, 'isLoading', false)
      this.$set(item, 'loading', false)
      this.$set(item, 'finished', false)
      // 将被点击的元素添加到我的频道中: 这里不能直接添加，否则会报错
      this.channelsList.push(item)
      // 保存频道数据
      // 判断用户是否登录：
      // 得到用户的登录信息
      var token = this.$store.state.userInfo.token
      if (!token) {
        //  1.0 未登录：直接将频道数据保存到 localstorage 中
        localSet('channels', this.channelsList)
      } else {
        //  2.0 已登录：将操作后的频道数据保存到服务器中
        // 生成一个接口需要的数组
        // 遍历 channelsList 生成数据结构,去掉 channelsList 中的第一个元素
        var channels = this.channelsList.slice(1).map((item, index) => {
          return {
            id: item.id,
            seq: index + 2
          }
        })
        try {
          await apiResetChannels(channels)
        } catch {
          this.$toast('频道操作失败')
        }
      }
    },
    // 得到频道数据的方法
    async getAllChannel () {
      var res = await apiGetAllChannels()
      // 保存所有的频道数据
      this.allChannelList = res.data.data.channels
      // console.log(this.allChannelList)
    }
  },
  mounted () {
    // 得到所有的频道数据
    this.getAllChannel()
  }

}
</script>

<style lang="less">
.myitem {
  position: relative;
  .cross {
    position: absolute;
    top: 5px;
    right: 10px;
  }
  .van-grid-item__content.van-grid-item__content--center.van-hairline {
    color: #646566;
    font-size: 12px;
  }
  .active {
    color: red;
  }
}
</style>
